<template>
  <el-card>
    <FreeForm
      :query-config="queryConfig"
      @search="
        (qForm, isReset) => {
          emits('search', qForm, isReset);
        }
      "
    ></FreeForm>
    <FreeTable
      :data="tableData"
      :columns="tableColumns"
      :config="tbConfig"
      :pagination="pagination"
      @paginationChange="emits('paginationChange')"
    >
      <template v-for="column in slotsColumn" #[column.slot]="{ scoped, row }">
        <slot :name="column.slot" :scoped="scoped" :row="row"></slot>
      </template>
    </FreeTable>
  </el-card>
</template>

<script setup lang="ts" name="apkManage-home">
import { onMounted, reactive, watch, ref } from "vue";
import type { FormRules } from "element-plus";
import type { IQueryFrom, ITableColumn } from "@/types/queryTable";

interface IConfig {
  queryConfig: IQueryFrom[];
  tableData: {
    [propName: string]: any;
  }[];
  tableColumns: ITableColumn[];
  tableConfig: {
    [propName: string]: any;
  };
  pagination: {
    [propName: string]: any;
  };
}
const props = withDefaults(defineProps<IConfig>(), {
  queryConfig: () => [],
  tableData: () => [],
  tableColumns: () => [],
  tableConfig: () => ({}),
  pagination: () => ({}),
});
const emits = defineEmits<{
  (
    e: "search",
    qForm: {
      [propName: string]: any;
    },
    isReset: boolean
  ): void;
  (e: "paginationChange"): void;
}>();

const tbConfig = reactive<{ [propName: string]: any }>({
  loading: false,
  border: true,
  rowKey: "id", // 开启树形结构 默认children
  treeProps: { children: "children" }, // 自定义children字段
});

const slotsColumn = ref<ITableColumn[]>([]);
watch(
  props.tableColumns,
  (newColumns) => {
    slotsColumn.value = newColumns.filter((e) => e.slot);
  },
  {
    deep: true,
    immediate: true,
  }
);
watch(
  props.tableConfig,
  (newColumns) => {
    setDefault(tbConfig, newColumns);
  },
  {
    deep: true,
    immediate: true,
  }
);

function setDefault(
  target: { [propName: string]: any },
  def: { [propName: string]: any }
) {
  for (const key in def) {
    if (Object.prototype.hasOwnProperty.call(def, key)) {
      target[key] = def[key];
    }
  }
}

// const queryConfig = reactive([
//   {
//     label: "文本",
//     prop: "inp",
//     queryType: "input",
//     defaultValue: "123",
//   },
//   {
//     label: "计数器",
//     prop: "inpNum",
//     queryType: "inputNumber",
//     defaultValue: 123,
//   },
//   {
//     label: "选择框",
//     prop: "sel",
//     queryType: "select",
//     options: [
//       { label: "选项1", value: "1" },
//       { label: "选项2", value: "2" },
//     ],
//     multiple: true,
//     defaultValue: ["1"],
//   },
// {
//   label: "日期",
//   prop: "date",
//   queryType: "date",
//   defaultValue: "2021-10-29"
//   // disabledDate: (time: Date) => {
//   //   return time.getTime() > Date.now()
//   // }
// },
// {
//   label: "日期范围",
//   prop: "daterange",
//   queryType: "daterange",
//   defaultValue: ["2023-09-01", "2023-09-05"],
//   // disabledDate: (time: Date) => {
//   //   return time.getTime() > Date.now()
//   // }
// },
// {
//   label: "日期时间",
//   prop: "datetime",
//   queryType: "datetime",
//   defaultValue: "2023-09-01 00:00:12",
//   // disabledDate: (time: Date) => {
//   //   return time.getTime() > Date.now()
//   // }
// },
//   {
//     label: "日期时间范围",
//     prop: "datetimerange",
//     queryType: "datetimerange",
//     defaultValue: ["2023-09-01 00:00:12","2023-09-06 12:12:12"],
//     disabledDate: (time: Date) => {
//       return time.getTime() > Date.now()
//     },
//     labelWidth: "130px"
//   },
// ]);
// {
//       id: "2",
//       name: "Tom",
//       url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
//       previewUrls: [
//         'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
//         'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
//         'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
//         'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
//       ],
//       children: [
//         {
//           id: "2-1",
//           name: "Tom",
//           url: "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
//           previewUrls: [
//             'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
//             'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
//             'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
//             'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
//           ],
//         }
//       ]
//     },
// {
//       prop: "name",
//       label: "姓名",
//     },
//     {
//       prop: "url",
//       label: "图片",
//       image: "url"
//     },
//     {
//       label: "操作",
//       slot: "operate"
//     },
</script>
